<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>仓库详情页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--&lt;!&ndash;App自定义的css&ndash;&gt;-->
		<!--<link rel="stylesheet" type="text/css" href="../../css/app.css" />-->
		<style>
			.cangku-box p{margin-top: 5px;margin-bottom: 5px;font-size: 12px}

			.ck-input{display: flex;justify-content: center;align-items: center;margin-bottom: 10px}

			.cl2 {
				color: #222 !important;
			}
			.cangkuinfo-title {
				line-height: 25px;
			}
			.mui-zuobiao {
				width: 100px;
				height: 100px;
				position: relative;
				color: #8f8f94;
			}
			.mui-ckjj-icon {
				background-position: 0px -1px;
			}
			.mui-ck-je span {
				 margin-left: 30px;
			 }
			.mui-kongx-icon {
				background-position: -30px 1px;
			}
			.mui-ck-icon {
				width: 30px;
				height: 35px;
				background: url(../../images/bizimg/ckinfo.png) no-repeat;
				position: absolute;
				background-size: 300%;
			}
			.cangku-box {
				font-size: 14px;
				font-weight: 400;
				line-height: 1.42;
				position: relative;
				display: inline-block;
				margin-bottom: 0;
				padding: 6px 12px;
				cursor: pointer;
				-webkit-transition: all;
				transition: all;
				-webkit-transition-timing-function: linear;
				transition-timing-function: linear;
				-webkit-transition-duration: .2s;
				transition-duration: .2s;
				text-align: center;
				vertical-align: top;
				white-space: nowrap;
				color: #333;
				border: 1px solid #ccc;
				border-radius: 3px;
				border-top-left-radius: 3px;
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
				border-bottom-left-radius: 3px;
				background-color: #fff;
				background-clip: padding-box;
				margin-right: 17px;
				margin-bottom: 15px;
			}
			.cangku-box{padding: 0 5px;margin: 0 auto;}
			.mui-pl-icon {
				background-position: -60px 1px;
			}
			.mui-ck-icon {
				width: 30px;
				height: 35px;
				background: url(../../images/bizimg/ckinfo.png) no-repeat;
				position: absolute;
				background-size: 300%;
			}
			.ml30 {
				margin-left: 30px;
			}
			.ck-hw em {
				font-style: normal;
				float: right;
				margin-right: 5px;
				color: #8f8f94;
			}
			.ck-input {
				width: 33%;
				float: left;
			}
			.ck-hw {
				width: 93%;
				margin: 10px auto;
				display: flow-root;
			}
			.mui-zuobiao i {
				width: 25px;
				height: 25px;
				background: url(../../images/bizimg/zuobiao.png);
				background-size: 100%;
				float: left;
				position: absolute;
				top: 8px;
				left: -25px;
			}
			.mt15 {
				margin-top: 15px !important;
			}
			.zwbg {
				background: #f5f5f5;
				height: 10px;
				width: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">仓库详情页</h1>
			<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right cl2">联系电话</button>
		</header>

		<div id="slider" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../../images/yuantiao.jpg">
					</a>
				</div>
				<!--&lt;!&ndash; 第一张 &ndash;&gt;-->
				<!--<div class="mui-slider-item">-->
					<!--<a href="#">-->
						<!--<img src="../../images/shuijiao.jpg">-->
					<!--</a>-->
				<!--</div>-->
				<!--&lt;!&ndash; 第二张 &ndash;&gt;-->
				<!--<div class="mui-slider-item">-->
					<!--<a href="#">-->
						<!--<img src="../../images/muwu.jpg">-->
					<!--</a>-->
				<!--</div>-->
				<!--&lt;!&ndash; 第三张 &ndash;&gt;-->
				<!--<div class="mui-slider-item">-->
					<!--<a href="#">-->
						<!--<img src="../../images/cbd.jpg">-->
					<!--</a>-->
				<!--</div>-->
				<!--&lt;!&ndash; 第四张 &ndash;&gt;-->
				<!--<div class="mui-slider-item">-->
					<!--<a href="#">-->
						<!--<img src="../../images/yuantiao.jpg">-->
					<!--</a>-->
				<!--</div>-->
				<!--<div class="mui-slider-item">-->
					<!--<a href="#">-->
						<!--<img src="../../images/yuantiao.jpg">-->
					<!--</a>-->
				<!--</div>-->
				<!--&lt;!&ndash; 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) &ndash;&gt;-->
				<!--<div class="mui-slider-item mui-slider-item-duplicate">-->
					<!--<a href="#">-->
						<!--<img src="../../images/shuijiao.jpg">-->
					<!--</a>-->
				<!--</div>-->
			</div>
			<div class="mui-slider-indicator" style="display: none">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">
				<a href="javascript:;">
					<div class="mui-media-object mui-pull-right mui-zuobiao">
						<i></i>
						<span>50KM</span>
					</div>

					<div class="mui-media-body cangkuinfo-title">
						<i>北京市密云区3号仓库</i>
						<p class="mui-ellipsis">北京市密云区无名路3号仓库</p>
					</div>
				</a>
			</li>
		</ul>
		<div class="zwbg"></div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">

				<div class="mui-media-body cangkuinfo-title pr mui-ck-je">
					<i class="mui-ck-icon mui-ckjj-icon"></i><span>仓库简介</span>
				</div>
				<p>北京市密云区无名路3号仓库北京市密云区无名路3号仓库北京市密云区无名路3号仓库北京市密云区无名路3号仓库北京市密云区无名路3号仓库北京市密云区无名路3号仓库</p>

			</li>
		</ul>
		<div class="mui-table-view ck-hw">

			<div class="mui-media-body cangkuinfo-title pr mui-ck-je">
				<i class="mui-ck-icon mui-kongx-icon"></i><span>选择空闲仓库货位</span>
			</div>
			<div class="mt15">
				<div class="ck-input">
					<div class="cangku-box">
						<p>300×200(单位cm²)</p>
						<p>￥350</p>
					</div>
				</div>
				<div class="ck-input">
					<div class="cangku-box">
						<p>300×200(单位cm²)</p>
						<p>￥350</p>
					</div>
				</div>
				<div class="ck-input">
					<div class="cangku-box">
						<p>300×200(单位cm²)</p>
						<p>￥350</p>
					</div>
				</div>
				<div class="ck-input">
					<div class="cangku-box">
						<p>300×200(单位cm²)</p>
						<p>￥350</p>
					</div>
				</div>
				<div class="ck-input">
					<div class="cangku-box">
						<p>300×200(单位cm²)</p>
						<p>￥350</p>
					</div>
				</div>
				<div class="ck-input">
					<div class="cangku-box">
						<p>300×200(单位cm²)</p>
						<p>￥350</p>
					</div>
				</div>
			</div>
			
		</div>
		<div class=" ck-hw">
			<div class="mui-media-body cangkuinfo-title pr ">
				<i class="mui-ck-icon mui-pl-icon"></i><span class="ml30">评论列表</span>
				<em>200条评论</em>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-3.2.1.min.js"></script>
	<script>
		var oImgBox = $(".mui-slider-group");   //包裹图片的盒子
		var num = $(".mui-slider-group").children().length;   //图片的个数
		if(num > 1){
		    $(".mui-slider-indicator").show();
            mui.init({
                swipeBack:true //启用右滑关闭功能
            });
            var slider = mui("#slider");
            slider.slider({
                interval: 2000         //每隔5秒调用一次
            });
		}
	</script>
	</body>

</html>